﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>逻辑应用预案库</title>
		<link rel="stylesheet" href="../css/css.css">
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<link type="text/css" rel="Stylesheet" href="../css/lapstyle.css" />
		<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="../js/messagecenter.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/initPage.js"></script>
		<style type="text/css">
		.app_text{
		  color:#04A0E9;
		  cursor:pointer;
		  margin-left:20px;
		}
		.app_text1{
			color:#04A0E9;
		  	cursor:pointer;
		}
		.page-split input{
			display:inline;	
			margin:0px 4px;
		}
		.app_del{
		  cursor:pointer;
		  margin-left:20px;
		}
		.text_color{
			color:#A6A6A6;
			text-align: left;
			text-indent: 14px;
		}
		.text_name{
			text-align:left;
			text-indent: 14px;
		}
		.app_no{
		    background-color: #83BE00;
		    width: 50px;
		    height: 18px;
		    margin-left: 16%;
		    text-indent: 7px;
		    border-radius: 4px;
		    color: #FFFFFF;
	        font-weight: 600;
		 	padding-top: 2px;
		}
		.headerTableDiv3 table tr td{
			border:1px solid #2E6A89;
		}
		#page ul li a{
			background-color: #009EE7;
			margin:0 10px;
		}
	</style>	
	</head>
	<body>
	<div class="left_content">
		<div class="left_block1">
			<div class="left_logo"></div>
			<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
			<div class="left_icons">
				<div class="left_icon1"></div>
				<div class="left_icon2"></div>
				<div class="left_icon3"></div>
			</div>
		</div>
		<div class="left_block2">
			<div class="left_menu">拓扑文件库</div>
			<div class="left_menu">逻辑预案库</div>
			<div class="left_menu">部署库</div>
			<div class="left_menu">监控</div>
			<div class="left_menu">其他</div>
		</div>
		<div class="left_block3">
			<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
			<button class="login">登录</button>
		</div>
	</div>
	<div class="right_content" >
			<form id="form1">
				<input type="hidden" id="curIndex" value="0"/>
				<input type="hidden" id="maxPage" value="0"/>
				<input type="hidden" id="curId" name="curId">
					<div class="top-bar">	
						<div style="float:left;">逻辑应用预案库<br>
							<span  class="text_color"  style="font-size: 13px;">Logical&nbsp;application&nbsp;plan&nbsp;library</span>
						</div>	
						<div class="top_input" style="float:right; height:36px;margin-top: 12px;">
			      			<button class="add" type="button" style="margin-left:20px;border-radius: 5px;">+添加</button>
			      			<button class="search" type="button">搜索</button>
							<input class="s_input" type="text" id="condition"  placeholder="输入关键字搜索"/>
						</div>			
					</div>
					<div class="table-box" >
						<div class="headerTableDiv">
							<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
								<colgroup>
									<col width="10%">
									<col width="15%">
									<col width="8%">
									<col width="12%">
									<col width="12%">
									<col width="18%">
									<col width="25%">
								</colgroup>
								<tr>									
									<td>
										<div class="text_name" style="">编号</div>
										<div class="text_color">Serial&nbsp;number</div>
									</td>
									<td>
										<div class="text_name" style="">名称</div>
										<div class="text_color">The&nbsp;application&nbsp;name</div>
									</td>
									<td>
										<div class="text_name" style="">创建人</div>
										<div class="text_color">founder</div>
									</td>
									<td>
										<div class="text_name" style="">创建时间</div>
										<div class="text_color">Creation&nbsp;time</div>
									</td>
									<td>
										<div class="text_name" style="">修改时间</div>
										<div class="text_color">Modify&nbsp;the&nbsp;time</div>
									</td>
									<td>
										<div class="text_name" style="">备注</div>
										<div class="text_color">note</div>
									</td>
									<td>
										<div class="text_name"style="text-indent: 0px;">操作</div>
										<div class="text_color" style="text-indent: 0px;">operation</div>
									</td>
								</tr>	
							</table>
						</div>
						<div class="contentTableDiv">
							<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
								<colgroup>
									<col width="10%">
									<col width="15%">
									<col width="8%">
									<col width="12%">
									<col width="12%">
									<col width="16%">
									<col width="27%">
								</colgroup>
							<tbody id="contentTableTbody">
								<tr>
									<td>
										<div  class="app_no">NO.01</div>
									</td >
									<td><div class="app_text1">部署项目1</div></td>
									<td>上大夫</td>
									<td><div class="text_color">2018-02-11 09:00</div></td>
									<td><div class="text_color">2018-02-11 15:23</div></td>
									<td>拓扑案例1+逻辑应用预案1</td>
							  		<td style="text-indent: 0px;">
						  				<button style="margin-left:20px;" onclick="open_pop();">查看预置表</button>
						  				<a class="app_text" >编辑</a>
						  				<a class="app_del">删除</a>
									</td>
							  	</tr >
						  	</tbody>
							</table>
						</div>					 
				</div>				
				<!-- 分页 -->
				<div class="page-split">
					<div id="page"></div>
					<div class="page_count text_color" style="float:right;font-size:13px;">共96条/11页</div>
				</div>
				<!-- 弹窗 -->
				<div class="pop_content" id="showInfo">
				<div class="pop_block">
					<div class="pop_barInfo" >
						<div style="font-size: 18px;">预置表信息查看</div>
						<span>view&nbsp;the&nbsp;preset&nbsp;table&nbsp;information</span>
					</div>
					<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="../images/bsk/pop_exit.png" onclick="exit_pop();"></div>
					<div class="headerTableDiv2">
						<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
							<colgroup>
								<col width="30%">
								<col width="30%">
								<col width="30%">
								<col width="10%">
							</colgroup>
							<tr>									
								<th>
									<div>序号</div>
								</th>
								<th>
									<div>APP名称</div>
								</th>
								<th>
									<div>APP_ID</div>
								</th>
								<th></th>
							</tr>
						</table>
					</div>
					<div class="contentTableDiv2">
						<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
							<colgroup>
								<col width="30%">
								<col width="30%">
								<col width="30%">
								<col width="10%">
							</colgroup>
							<tbody id="popTbody">
						  	</tbody>
						</table>
					</div>	
				</div>				 
			</div>
			</form>
		</div>

	</body>
	<script type="text/javascript">
    $(function(){
        $(".search").on("click",function(){
            alert("搜索");
            var curIndex = $("#curIndex").val();
            var name_like = $("#condition").val();
            alert(name_like);
            getList(curIndex,name_like);
        });
    });
    $(function(){
        $(".add").on("click",function(){
            alert("添加");
            window.location.href="../html/newMachines.html"//跳转到创建机箱及内部板卡
        });
    });

    $(function(){
        var curIndex = $("#curIndex").val();
        getList(curIndex);

		var dataArr = [];
	 	for(i=1;i<=20;i++){
			var dataJson = {};
			dataJson.id = i;
			if(i<10){
				dataJson.no= "NO.0"+i;
			}else{
				dataJson.no= "NO."+i;
			}
			dataJson.name = "string"+i;
			dataJson.creator = "string"+i;
			dataJson.cdt = i;
			dataJson.lastModifyTime = "2018-04-10T05:22:20.636Z";
			dataJson.remark = "string"+i;
			dataArr.push(dataJson);
		} 
		addData(dataArr,990,25);

	});
    /*编辑*/
    function edit(id){
        alert("编辑");
        alert(id);
        var url="deploy_topology/edit";
        if(id!=null) {
            /*$.post(url, {id: id}, "JSON").done(function () {

            });*/
            window.location.href="../html/llinkbindors.html"
        }else{
            aler("请选择id");
        }
    }
	/*删除*/
    function Delete(id){
        alert("删除");
        alert(id);
        var url="deploy_topology/delete"
        if(id!=null) {
           /* $.post(url, {id: id}, "JSON").done(function (data) {
                if (data) {
                   window.location.href="../html/generalCMD.html"
                }
            });*/
            window.location.href="../html/lapLibrary.html"
        }else {
            alert("请选择要删除的id");
        }
    }
    /*列表*/
    function getList(curIndex,name_like){
        var url = "logic_topology/query";
        $("#curIndex").val(curIndex);
        var param = {params:{name_like:name_like},pageable:{page:0,start:0,size:25}};
        $.post(url,param,"JSON").done(function(data){
            if(data){
                var dataList = data.data;
                   if(dataList&&dataList.length>0){
                    addData(dataList,data.total,25)
                }
            }
        });
    }
	/*列表*/
	function addData(data,total,pageSize){
        var maxPage = Math.ceil(total/pageSize);
        pageCal(1,maxPage,total);
        $("#maxPage").val(maxPage);
        $("#contentTableTbody").empty();
		var html = '';
		$.each(data,function(k,v){
			html += '<tr>';
			html += '<td><div class="app_no">'+v.no+'</div></td >';
			html += '<td><div class="app_text1" style="cursor:default;">'+v.name+'</div></td>';
			html += '<td>'+v.creator+'</td>';
			html += '<td style="text-indent: 0px;"><div class="text_color">'+v.cdt+'</div></td>';
			html += '<td ><div class="text_color" style="text-indent: 0px;margin-left:15px;">'+v.lastModifyTime+'</div></td>';
			html += '<td ><div>'+v.remark+'</div></td>';
			html += '<td style="text-indent: 0px;">';
			html += '<button type="button" style="margin-left:20px;" onclick="open_pop('+v.id+');">查看预置表</button>';
			html += '<a class="app_text update" style="margin-left:40px;" onclick="edit('+v.id+');">编辑</a>';
			html += '<a class="app_del" style="margin-left:40px;" onclick="Delete('+v.id+');">删除</a>';
			html += '</td>';
			html += '</tr>';
		});
		$("#contentTableTbody").append(html);
	} 
	/*弹窗*/
    function open_pop(id){
        /*
        var url = 'logic_topology/get_by_id';
        var param = {id:id};
        $.post(url,param,"JSON").done(function(data){
            if(data&&data.length>0){
                addDataPop(data)
            }
        });
        */
        var dataArr = [];
        for(i=1;i<=10;i++){
            var dataJson = {};
            dataJson.no = i;
            dataJson.name = "OX8E_"+i;
            dataJson.appId = i;
            dataArr.push(dataJson);
        }
        addDataPop(dataArr);
        $("#showInfo").show();
        tableSum2();
    }
	function addDataPop(data){
		$("#popTbody").empty();
		var html = '';
		$.each(data,function(k,v){
			html += '<tr>';
			html += '<td><div class="conn_no">'+v.no+'</div></td>';
			html += '<td>'+v.name+'</td>';
			html += '<td>'+v.appId+'</td>';
			html+='<td class="pop_child">';
			html+='<div  class="pop-expand">展开</div>';
			html+='</td>';
			html += '</tr>';
		});
		$("#popTbody").append(html);
		/*子弹窗*/
		$("#popTbody .pop-expand").on("click",function(){
			if($(this).hasClass("pop-hide")){
				$(this).removeClass("pop-hide")
				$(".child_tr").remove();
				$(this).parent().parent().next().removeClass("border-top-none");
			}else{
                /*
                var id=$(this).parents("tr").find(".conn_no").val();
                var url = 'logic_topology/get_by_id';
				var param = {id:id};
				$.post(url,param,"JSON").done(function(data){
					if(data&&data.length>0){
						addDataPop(data);
					}
				}); */
				var dataArr = [];
				for(i=1;i<=2;i++){
					var dataJson = {};
					dataJson.no ="链路"+ i;
					dataJson.outName = "APP甲";
					dataJson.outId = "14";
					dataJson.outPort = "FPGA141";
					dataJson.inName="APP乙";
					dataJson.inId="15";
					dataJson.inPort="FPGA141";
					dataArr.push(dataJson);
				} 
				addChildPop(dataArr,$(this));
				$(this).addClass("pop-hide")
			}
		});
	}
	

	function exit_pop(){
		$("#showInfo").hide();
	}
	/*子弹窗*/
	function addChildPop(data,obj){
			var html='<tr class="child_tr"><td style="border:none;" colspan=4>';
			html+='<table style="width:100%;" >';
			html+='<tr class="border-top-none child-pop"><td>序号</td><td>发送端APP名称</td><td>发送端ID</td><td>发送端口名称</td><td>接收端APP名称</td><td>接收端口ID</td><td>接收端口名称</td></tr>'
			if(data&&data.length>0){
				$.each(data,function(k,v){
					if(k==data.length-1){
						html+='<tr class="border-bottom-none child-pop">';
					}else{
						html+='<tr class="child-pop">';
					}
					html+='<td width="14%" >'+v.no+'</td>';
					html+='<td width="14%">'+v.outName+'</td>';
					html+='<td width="14%">'+v.outId+'</td>';
					html+='<td width="14%">'+v.outPort+'</td>';
					html+='<td width="14%">'+v.inName+'</td>';
					html+='<td width="14%">'+v.inId+'</td>';
					html+='<td width="14%">'+v.inPort+'</td>';
			  		html+='</tr>';
				});
			}
			html+='</table>';
			html+='</td></tr>';
			obj.parent().parent().next().addClass("border-top-none");
			obj.parent().parent().after(html);
	}
	function tableSum() {
		$(".contentTableDiv").scrollTop(10);// 控制滚动条下移10px
		if ($(".contentTableDiv").scrollTop() > 0) {
			var scrollWidth = getScrollbarWidth();
			$(".contentTableDiv").css("right",(20-scrollWidth)+"px");
		} else {
			$(".contentTableDiv table").css("width", "100%");
		}
		$(".contentTableDiv").scrollTop(0);// 滚动条返回顶部 
	}
	function tableSum2() {
		$(".contentTableDiv2").scrollTop(10);// 控制滚动条下移10px
		if ($(".contentTableDiv2").scrollTop() > 0) {
			var scrollWidth = getScrollbarWidth();
			$(".contentTableDiv2").css("right",(30-scrollWidth)+"px");
		} else {
			$(".contentTableDiv2 table").css("width", "100%");
		}
		$(".contentTableDiv").scrollTop(0);// 滚动条返回顶部 
	}
	$(function(){
		tableSum();
		tableSum2();
	});

	$(window).resize(function() {
		tableSum();
		tableSum2();
	});
	
	function getScrollbarWidth() {
	    var odiv = document.createElement('div'),//创建一个div
	        styles = {
	            width: '100px',
	            height: '100px',
	            overflowY: 'scroll'//让他有滚动条
	        }, i, scrollbarWidth;
	    for (i in styles) odiv.style[i] = styles[i];
	    document.body.appendChild(odiv);//把div添加到body中
	    scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
	    odiv.remove();//移除创建的div
	    return scrollbarWidth;//返回滚动条宽度
	}

    function pageCal(curIndex,pageCount,totalCount){
        pageUtil.initPage('page',{
            totalCount:pageCount,//总页数，一般从回调函数中获取。如果没有数据则默认为1页
            curPage:curIndex,//初始化时的默认选中页，默认第一页。如果所填范围溢出或者非数字或者数字字符串，则默认第一页
            showCount:9,//分页栏显示的数量
            pageSizeList:[5,10,15,20,25,30],//自定义分页数，默认[5,10,15,20,50]
            defaultPageSize:1,//默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中，则也为第一个
            isJump:false,//是否包含跳转功能，默认false
            isPageNum:false,//是否显示分页下拉选择，默认false
            isPN:true,//是否显示上一页和下一面，默认true
            isFL:false,//是否显示首页和末页，默认true
            jump:function(curPage,pageSize){//跳转功能回调，传递回来2个参数，当前页和每页大小。如果没有设置分页下拉，则第二个参数永远为0。这里的this被指定为一个空对象，如果回调中需用到this请自行使用bind方法
                console.log(curPage,pageSize);
            },
        });
        $(".page-split .page_count").html('共'+totalCount+'条/'+pageCount+'页');
    }
	$(function(){
		$(".connect").on("click",function(){
			alert("连接");
		});
	});  
	$(function(){
		$(".btn-s .save").on("click",function(){
			alert("保存");
			$("#form1").attr({action:"${rc.getContextPath()}/save", method: "POST"}).submit();			
		});
	});


	</script>
</html>
